import { SchemaManage } from '@/components/SchemaComponent';
import React, { useRef, useMemo, useState } from 'react';
import { connect } from 'umi';
import { RuleManageAPI } from '../common/type';
import { ManageTabSwitch, ManageTableSwitch } from '../mconfig';
import { RuleManageServices } from '../services';
import { PlusOutlined } from '@ant-design/icons';
import { history } from 'umi';
import { getKeyRouter } from '@/utils';
import { MockJosn } from '../common/MockJosn';
import { ILoadMapTypeAll } from '@/common';
import { CancelModal } from '@/components/CancelModal';
import { DetailDrawer } from './DetailDrawer';
import { SwtichModal } from './SwtichModal';
import { UpdateModal } from './UpdateModal';

const RuleManageView: React.FC<RuleManageAPI.IMaterialManageView> = ({ curRes }) => {
  /**
   * 管理页services
   * */
  const { data, searchList, reloadRequest, pagination, reloadRefresh, loading } = RuleManageServices(curRes);

  /**管理页的ref*/
  const RuleManageViewRef: any = useRef();

  /**
   * 是否显示作废弹窗
   * */
  const [isShowCancel, setIsShowCancel] = useState<Record<string, any>>({
    isShow: false,
    resObj: {},
  });

  /** 查看详情页面  */
  const [detailDrawerState, setDetailDrawerState] = useState<Record<string, any>>({
    isShowModal: false,
    checkRowsInfo: {},
  });

  /** 添加编辑弹窗页面  */
  const [addOrEditModalState, setAddOrEditModalState] = useState<Record<string, any>>({
    isShowModal: false,
    checkRowsInfo: {},
  });

  /**
   * 是否显示启用禁用弹窗
   * */
  const [isShowSwitch, setIsShowSwitch] = useState({
    isShow: false,
    resObj: {},
  });

  /**
   * 头部权限的切换
   * */
  const switchList: RuleManageAPI.IManageTabsSwitchType = useMemo(() => {
    return [];
  }, [curRes]);

  /**
   * 头部切换方法
   * */
  const onSwitch = (key: string | undefined | number, searchValues: any, params: any) => {
    reloadRequest({ ...params, ...searchValues });
  };

  /**
   * 重置方法
   * */
  const onReset = (reqParams: RuleManageAPI.IAssetTableRequestType) => {
    reloadRequest({ ...reqParams });
  };

  /**
   * 搜索方法
   * */
  const onSearch = (reqParams: RuleManageAPI.IAssetTableRequestType) => {
    reloadRequest({ ...reqParams });
  };

  /**
   * 分页方法
   * */
  const onPageChange = (current: any, pageSize: any, params: any) => {
    reloadRequest({ pageSize, current, ...params });
  };

  /**
   * 左侧按钮
   * */
  const actionList: RuleManageAPI.IActionList = useMemo(() => {
    return [
      {
        title: '添加',
        visible: curRes?.['/purchaseStyleRuleController/add'] || false,
        type: 'primary',
        icon: <PlusOutlined />,
        onClick: () => {
          setAddOrEditModalState({
            isShowModal: true,
          });
          // history.push({
          //   pathname: `/purchaseStyleRuleController/add/:${getKeyRouter()}${getKeyRouter()}`,
          //   state: {
          //     title: '添加采购规则',
          //     recordObj: null,
          //   },
          // });
        },
      },
    ];
  }, [curRes]);

  /**
   * Table的操作方法
   * */
  const getTableOperateFuncs: RuleManageAPI.IOperateAPI = {
    onView: (record) => {
      setDetailDrawerState({
        isShowModal: true,
        checkRowsInfo: record,
      });
    },
    onEdit: (record) => {
      setAddOrEditModalState({
        isShowModal: true,
        checkRowsInfo: record,
      });
      // history.push({
      //   pathname: `/purchaseRuleController/edit/:${getKeyRouter()}${getKeyRouter()}`,
      //   state: {
      //     title: '编辑采购规则',
      //     recordObj: { ...record },
      //   },
      // });
    },
    onCancel: (record) => {
      setIsShowCancel({
        isShow: true,
        resObj: record,
      });
    },
    onChangeSwitch: (res, record) => {
      setIsShowSwitch({
        isShow: true,
        resObj: {
          title: res ? '启用' : '禁用',
          isOpen: res,
          record,
        },
      });
    },
  };

  /**
   * Table的columns
   * */
  const getTableColumn: Record<string, any>[] = useMemo(() => {
    return ManageTableSwitch(curRes, getTableOperateFuncs);
  }, [curRes]);

  /** 刷新管理页 */
  const reloadManage = () => {
    reloadRefresh();
  };

  return (
    <div
      style={{
        position: 'relative',
        overflow: 'hidden',
        height: '100%',
        width: '100%',
      }}
    >
      <SchemaManage
        ref={RuleManageViewRef}
        searchProps={{
          switchList,
          searchList,
          onSwitch,
          onReset,
          onSearch,
        }}
        actionList={actionList}
        tableProps={{
          columns: getTableColumn,
          dataSource: data?.rows, //mockData
          // dataSource: MockJosn,
          rowKey: 'id',
          loading: loading,
          pagination: pagination as any,
          onPageChange: onPageChange,
        }}
      />

      {/* {isShowCancel?.isShow && (
        <CancelModal
          checkRows={isShowCancel?.resObj}
          cancelTypeDic={ILoadMapTypeAll.PROCURE_CANCELTYPE as any}
          cancelFormTypeRequired={true}
          cancelFormReasonRequired={true}
          modalTitle={'作废计划'}
          cancelRequestUrl={'/purchasePlanController/cancel'}
          cancelRequestBody={{ state: 3 }}
          reloadManage={() => {
            reloadRequest({});
          }}
          onClose={() => {
            setIsShowCancel({
              isShow: false,
              resObj: {},
            });
          }}
        />
      )} */}

      {/** 添加编辑弹窗 */}
      {addOrEditModalState?.isShowModal && (
        <UpdateModal
          onClose={() => {
            setAddOrEditModalState({
              isShowModal: false,
              checkRowsInfo: {},
            });
          }}
          checkRowsInfo={addOrEditModalState?.checkRowsInfo}
          reloadRequest={() => {
            reloadRequest({});
          }}
          curRes={curRes}
        />
      )}

      {isShowSwitch?.isShow && (
        <SwtichModal
          onClose={() => {
            setIsShowSwitch({
              isShow: false,
              resObj: {},
            });
          }}
          isShowSwitch={isShowSwitch}
          reloadRequest={() => {
            reloadRequest({});
          }}
        />
      )}

      {/* 查看详情抽屉 */}
      <DetailDrawer
        curRes={curRes}
        onClose={() => {
          setDetailDrawerState({
            isShowModal: false,
            checkRowsInfo: {},
          });
        }}
        isShowDetail={detailDrawerState?.isShowModal}
        recordObj={detailDrawerState?.checkRowsInfo}
        reloadManage={reloadManage}
      />
    </div>
  );
};

export default connect(({ baseLogin, navTab }: Record<string, any>) => ({
  curRes: baseLogin?.permissions,
  navTab,
}))(RuleManageView);
